<template>
    <div class="card" :class="{ 'turned-over': turnedOver }" :style="{ '--height': height, '--width': width }">
        <div class="front">
            <slot name="front"></slot>
        </div>
        <div class="back">
            <slot name="back"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { CardOptions } from '@/types/game/card';
const { height = "60px", width = "40px", turnedOver } = defineProps<CardOptions>()
</script>

<style scoped>
.card {
    height: var(--height);
    width: var(--width);
    position: relative;
}

.front,
.back {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

.back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.card.turned-over .front {
    transform: rotateY(180deg);
}

.card.turned-over .back {
    transform: rotateY(0deg);
}
</style>
